<template>
  <a-table :columns="columns" :data-source="data" :pagination="ipagination" @change="pageChange" bordered :rowKey="record=>record.class_id">
    <template slot="operation" slot-scope="text, record">
      <div class="editable-row-operations">
        <span>
          <classUpdate :obj="record" @refresh="refresh"></classUpdate>
          <a-divider type="vertical" />
        </span>
        <span>
          <a :disabled="editingKey !== ''" @click="details(record.class_id)">详情</a>
          <a-divider type="vertical" />
        </span>
        <span>
          <a-popconfirm
          v-if="data.length"
          title="确定要删除吗?"
          @confirm="() => onDelete(record)"
        >
          <a :disabled="editingKey !== ''" >删除</a>
        </a-popconfirm>
        </span>
      </div>
    </template>
  </a-table>
</template>
<script>
const columns = [
  {
    title: '班号',
    dataIndex: 'class_id',
    width: '30%',
    scopedSlots: { customRender: 'class_id' },
  },
  {
    title: '班名',
    dataIndex: 'class_name',
    width: '30%',
    scopedSlots: { customRender: 'class_name' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '40%',
    scopedSlots: { customRender: 'operation' },
  },
];

const data = [];

import { request } from "../../../api/index";
import classUpdate from "../subComponents/classUpdate.vue"
export default {
  inject:['reload'],
  components:{classUpdate},
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      data:[],
      columns,
      editingKey: '',
      ipagination: {
        current: 1,
        pageSize: 8,
        total: data.length,
        showSizeChanger: true,
        showQuickJumper: true,
        hideOnSinglePage:true, // 少于一页时隐藏分页
        pageSizeOptions: ['8','16'],  //这里注意只能是字符串，不能是数字
        showTotal: (total, range) => `显示${range[0]}-${range[1]}条，共有 ${total}条`
        },
    };
  },
  mounted() {
    request({
      url: "/class/class_view",
      method: "get",
      params: {
        type: 'all',
      },
    })
      .then((res) => {
        // console.log(res.data.class_all);
        this.data = res.data.class_all;
      })
      .catch((err) => {
        // console.log(err);
      });
  },
  methods: {
    refresh(){
      // console.log("刷新");
      this.reload();
    },
    pageChange(page, pageSize) {
      this.ipagination.current = page.current;
      this.ipagination.pageSize = page.pageSize;
    },
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    details(key){
      this.$router.push({path:'/checkStudents',query: {class_student_id:key}})
    },
    onDelete(key) {
      // console.log(key.class_id);
      request({
          url: "/class/class_delete",
          method: "post",
          data: {
              class_id: key.class_id,
          },
        })
          .then((res) => {
              // console.log(res)
              if(res.data.message == "success"){
                alert("删除成功")
                this.reload();
              }else{
                alert("删除失败")
              }
          })
          .catch((err) => {
              // console.log(err)
          });
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
        delete target.editable;
        this.data = newData;
      }
    },
  },
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 10px;
}
</style>